<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js" /></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js" /></script>
<link rel="stylesheet" type="text/css"
	href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" " />
<style type="text/css">
.ab {
	position: absolute;
	width: 90%;
	top: 100px;
	left: 50px;
	border: 1px solid blue;
	background-color: white;
}

#elementView {
	width: 50%;
	height: 300px;
	float: left;
}

#htmlResult {
	overflow: hidden;
	background: gray;
	width: 50%;
	height: 300px;
	float: left;
}

.hide {
	display: none;
}
</style>
<script type="text/javascript">
	$(function() {
		//$(".ab").draggable();
	});
	
	var result = "";
	var cssIndex = 0;
	var n = "\n";

	var styles = {};

	function getStyle() {
		var eleSelector = $("#jq_text").val();
		var eleFrame = $("#site").contents();

		var ele = $(eleSelector, eleFrame);
		if (!ele.length) {
			alert('无该元素' + $("#jq_text").val());
			return;
		}
		clean();
		getElement(ele, $('#elementView'));

		$(".ab").removeClass("hide");

		$('#noStyle').html("");
		$('#elementView').clone().appendTo($('#noStyle'));
		removeStyle($('#noStyle'));
		addResult("</style><body>" + $('#noStyle').html() + "</body></html>");
		$("#htmlResult").text(result);

	}

	function getElement(ele, root) {
		var eleCopy = ele.clone().appendTo(root);
		//alert(ele.html());
		eleCopy.removeAttr("class");
		eleCopy.children().remove();
		var eleEmpty = $("<" + ele[0].tagName +">").prependTo($("#tmp"));
		var fullStyle = getComputedStyle(ele[0]);
		var emptyStyle = getComputedStyle(eleEmpty[0]);

		var eleStyle = "";
		for ( var i = 0; i < fullStyle.length; ++i) {
			var styleName = fullStyle[i];
			if (fullStyle[styleName] !== emptyStyle[styleName]) {
				//addResult(styleName + ":" + fullStyle[styleName] + ";");
				eleStyle = eleStyle + styleName + ":" + fullStyle[styleName]
						+ ";";
			}
		}
		eleCopy.attr("style", eleStyle)

		var cssName = "sty" + (cssIndex++);
		var existCssName = cssName;
		for ( var style in styles) {
			if (eleStyle === styles[style]) {
				existCssName = style;
				break
			}
		}

		if (cssName === existCssName) {
			addResult("." + cssName + "{");
			addResult(eleStyle);
			addResult("}");
			eleCopy.addClass(cssName);
			styles[cssName] = eleStyle;
		} else {
			eleCopy.addClass(existCssName);
		}

		var eleChildren = ele.children(":visible");
		for ( var j = 0; j < eleChildren.length; ++j) {
			getElement($(eleChildren[j]), eleCopy);
		}
	}

	function addResult(text) {
		result = result + n + text;
	}

	function getHtml() {
		$("#site").attr("src", $("#jq_url").val());
	}

	function showHtml() {
		$(".ab").toggleClass("hide");
	}

	function clean() {
		$("#elementView").html("");
		$('#htmlView').html("");
		$('#noStyle').html("");

		result = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><style>";
		cssIndex = 0;
		styles = {};
	}

	function removeStyle(ele) {
		ele.attr("style", null);
		ele.children().each(function() {
			removeStyle($(this));
		});
	}
</script>
</head>
<body style="margin: 0px; overflow: hidden;">
	<input type="text" id="jq_url" value="http://www.chinamoney.com.cn/">
	<input type="button" id="jq_gethtml" value="获取页面" onclick="getHtml()">
	<input type="text" id="jq_text" value="#nav">
	<input type="button" id="jq_test" value="获取元素" onclick="getStyle()">
	<input type="button" id="jq_show" value="切换" onclick="showHtml()">
	<hr>
	<iframe id="site" frameborder="0" scrolling="auto"
		src="http://www.chinamoney.com.cn/" style="width: 100%; height: 100%;"></iframe>
	<div class="ab hide">
		<div id="elementView"></div>
		<div id="htmlResult"></div>
	</div>

	<!-- 隐藏域 -->
	<div id="noStyle" class="hide"></div>
	<div id="tmp" class="hide"></div>
</body>
</html>